<!-- 飞线配置 -->
<template>
  <div>
    <el-form-item label="相对坐标">
          <el-switch v-model="main.activeOption.relative"></el-switch>
        </el-form-item>
    <el-form-item label="透明度">
      <el-slider v-model="main.activeOption.opacity"></el-slider>
    </el-form-item>
    <el-form-item label="背景图">
          <l-img-select v-model="main.activeOption.bgImgSrc" />
        </el-form-item>
    <el-collapse accordion>
      <el-collapse-item title="动画设置">
        <el-form-item label="缩放">
          <el-slider
            v-model="main.activeOption.scale"
            :min="1"
            :max="10"
          ></el-slider>
        </el-form-item>
        <el-form-item label="X旋转度">
          <el-slider
            v-model="main.activeOption.rotateX"
            :min="min"
            :max="max"
          ></el-slider>
        </el-form-item>
        <el-form-item label="Y旋转度">
          <el-slider
            v-model="main.activeOption.rotateY"
            :min="min"
            :max="max"
          ></el-slider>
        </el-form-item>
        <el-form-item label="Z旋转度">
          <el-slider
            v-model="main.activeOption.rotateZ"
            :min="min"
            :max="max"
          ></el-slider>
        </el-form-item>
        <el-form-item label="进入动画">
          <l-select
            :options="animateOptions"
            v-model="main.activeOption.animateValue"
            @change="handleChangeAnimate"
          >
          </l-select>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="光晕属性">
        <el-form-item label="是否显示">
          <el-switch v-model="main.activeOption.halo.show"></el-switch>
        </el-form-item>
        <el-form-item label="动画时长(s)">
          <el-input-number
            v-model="main.activeOption.halo.duration.x"
            controls-position="right"
            style="width:50%"
          >
          </el-input-number>
          <el-input-number
            v-model="main.activeOption.halo.duration.y"
            controls-position="right"
            style="width:50%"
          >
          </el-input-number>
        </el-form-item>
        <el-form-item label="颜色">
          <l-input-color v-model="main.activeOption.halo.color"></l-input-color>
        </el-form-item>
        <el-form-item label="最大半径">
          <el-input-number v-model="main.activeOption.halo.radius"></el-input-number>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="点名称属性">
        <el-form-item label="是否显示">
          <el-switch v-model="main.activeOption.text.show"></el-switch>
        </el-form-item>
        <el-form-item label="位置偏移">
          <el-input-number
            v-model="main.activeOption.text.offset.x"
            controls-position="right"
            style="width:50%"
          >
          </el-input-number>
          <el-input-number
            v-model="main.activeOption.text.offset.y"
            controls-position="right"
            style="width:50%"
          >
          </el-input-number>
        </el-form-item>
        <el-form-item label="颜色">
          <l-input-color v-model="main.activeOption.text.color"></l-input-color>
        </el-form-item>
        <el-form-item label="文字大小">
          <el-input-number
            v-model="main.activeOption.text.fontSize"
            controls-position="right"
          >
          </el-input-number>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="点图标属性">
        <el-form-item label="是否显示">
          <el-switch v-model="main.activeOption.icon.show"></el-switch>
        </el-form-item>
        <el-form-item label="图标">
          <l-img-select v-model="main.activeOption.icon.src" />
        </el-form-item>
        <el-form-item label="宽度">
          <el-input-number
            v-model="main.activeOption.icon.width"
            controls-position="right"
          >
          </el-input-number>
        </el-form-item>
        <el-form-item label="高度">
          <el-input-number
            v-model="main.activeOption.icon.height"
            controls-position="right"
          >
          </el-input-number>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="飞线属性">
        <el-form-item label="宽度">
          <el-input-number
            v-model="main.activeOption.line.width"
            controls-position="right"
          >
          </el-input-number>
        </el-form-item>
        <el-form-item label="飞线颜色">
          <l-input-color v-model="main.activeOption.line.color"></l-input-color>
        </el-form-item>
        <el-form-item label="轨迹颜色">
          <l-input-color v-model="main.activeOption.line.orbitColor"></l-input-color>
        </el-form-item>
        <el-form-item label="动画时长(s)">
          <el-input-number
            v-model="main.activeOption.line.duration.x"
            controls-position="right"
            style="width:50%"
          >
          </el-input-number>
          <el-input-number
            v-model="main.activeOption.line.duration.y"
            controls-position="right"
            style="width:50%"
          >
          </el-input-number>
        </el-form-item>
        <el-form-item label="显示半径">
          <el-input v-model="main.activeOption.line.radius"></el-input>
        </el-form-item>
        <el-form-item label="飞线曲率">
      <el-slider v-model="main.activeOption.line.curvature" :min="1" :max="10"></el-slider>
    </el-form-item>
    <el-form-item label="飞线收束程度">
      <el-slider v-model="main.activeOption.line.k" :min="-1" :max="1" :step="0.1"></el-slider>
    </el-form-item>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  inject: ["main"],
  data() {
    return {
      min: -360,
      max: 360,
      animateOptions: [
        { label: "弹跳", value: "bounce" },
        { label: "放大缩小弹簧", value: "bounceIn" },
        { label: "向下长距进入", value: "fadeInDownBig" },
        { label: "向右长距进入", value: "fadeInLeftBig" },
        { label: "向左长距进入", value: "fadeInRightBig" },
        { label: "向上长距进入", value: "fadeInUpBig" },
        { label: "Y轴旋转", value: "flip" },
        { label: "中心X轴旋转", value: "flipInX" },
        { label: "中心Y轴旋转", value: "flipInY" },
      ],
    };
  },
  methods: {
    handleChangeAnimate(val) {
      if (val) {
        this.$set(this.main.activeOption, "animateValue", val.value);
      } else {
        this.$set(this.main.activeOption, "animateValue", "");
      }
    },
  },
};
</script>

<style>
</style>